<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>博客列表</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" />
    <style>
        /* footer元素设置 */
        footer div .row {
            margin-bottom: 0.625rem;
            height: 6.25rem;
        }
        footer div .row [class*="col-md-3"] {
            height: 100px;
            margin-top: 1.875rem;
            text-align: center;
            border-right: 1px solid #122B40;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div  th:replace="admin/_fragments :: nav">
    <nav class="navbar navbar-inverse navbar-static-top" role="navagation">
        <div class="container">
            <!-- logo -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">管理后台</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li ><a href="#"><i class="glyphicon glyphicon-home"></i>&nbsp;博客</a></li>
                    <li ><a href="#"><i class="glyphicon glyphicon-th"></i>&nbsp;分类</a></li>
                    <li ><a href="#"><i class="glyphicon glyphicon-tags"></i>&nbsp;标签</a></li>
                </ul>

                <!-- 用户已登录      ↓ -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <!-- 用户头像      ↓ -->
                            <img id="iconImg" style="height:30px;width:30px" src= "../../static/img/default.jpg" class="img-circle"/>
                            <!-- 用户头像      ↑ -->
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a>头像修改</a></li>
                            <li><a href="/static/img/admin/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 用户登录状态       ↑ -->
            </div>
        </div>
    </nav>
</div>

<!-- 中间内容-->
<div style="padding-top: 3.125rem ; margin-bottom: 1.25rem;">
    <div class="container">
        <!--操作结果信息展示区-->
        <div th:if="${message} != null" class="alert alert-info alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2>提示：</h2>
            <p style="font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[${message}]]</p>
        </div>

        <div class="panel panel-default">
            <div class="text-right">
                <a class="btn btn-warning" th:href="@{/admin/types/input}">新增</a>
            </div>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th style="width: 10px"></th>
                        <th style="width: 200px">分类名</th>
                        <th style="width: 100px">操作</th>
                    </tr>
                </thead>
                <tbody th:each="type : ${types.records}">
                    <tr>
                        <td th:text="${type.id}"></td>
                        <td th:text="${type.name}"></td>
                        <td>
                            <a th:href="@{/admin/types/{id}/input(id=${type.id})}" class=" btn btn-primary">编辑</a>
                            <a th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="btn btn-danger">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer">
                <nav aria-label="Page navigation">
                    <ul class="pager">
                        <li><a th:href="@{/admin/types(currentPage=${types.current}-1)}">上一页</a></li>
                        <li><a th:href="@{/admin/types(currentPage=${types.current}+1)}">下一页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer th:replace ="admin/_fragments :: footer" class="footer navbar-default navbar-static-bottom" >
    <div class="container-fluid" style="background-color: #3C763D;height: 200px;">
        <div class="row" style="height: 60%">
            <div class="col-md-3"><img src="../../static/img/QR-code.jpg"  th:src="@{/img/QR-code.jpg}" class="img-rounded" height="80px" width="80px"></div>
            <div class="col-md-3" id="footer-freshBlogs-container">
                <div th:fragment="footer-fresh-div" >
                    <strong>最新博客</strong>
                    <div th:each="blog : ${blogs}">
                        <a href="#" style="color: #0C1021" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">Dapibus ac facilisis in</a>
                    </div>
                    <!--/*-->
                    <div>
                        <a href="#">Morbi leo risus</a>
                    </div>
                    <div>
                        <a href="#">Vestibulum at eros</a>
                    </div>
                    <!--*/-->
                </div>
            </div>
            <div class="col-md-3">
                <address>
                    <strong>联系我</strong><br>
                    <p>
                        邮箱: <span th:text="#{footer.email}">121@136.com</span><br>
                        QQ: <span th:text="#{footer.qq}">666666666</span><br>
                        QQ群: <span th:text="#{footer.qqGroup}">666666666</span>
                    </p>
                </address>
            </div>
            <div class="col-md-3">
                <strong>SJZD</strong><br>
                <p th:text="#{footer.introduce}">一个简易的博客</p>
            </div>
        </div>
        <div class="text-center" style="border-top: black 1px solid; width: 100%;">
            <div style="margin-top: 20px">
                <strong>Copyright &copy; 2019 - 2050 SJZD designed at CQUT</strong>
            </div>
        </div>
    </div>
</footer>
<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script type="text/javascript" src="../static/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<!--/*/</th:block>/*/-->
</body>
</html>
